<script setup lang="ts"></script>
<template>
  <div>
    <Card>
      <template #title>接口信息</template>
      <template #operation><ElButton type="primary">申请接口</ElButton></template>
      <div class="flex justify-between m-2">
        <div>接口地址：{{ 'address' }}</div>
        <div>接口状态：{{ '已启用' }}</div>
      </div>
      <div class="m-2">接口描述：{{ 'address' }}</div>
      <div class="flex justify-around m-4">
        <div class="border-gray-300 border-2 text-gray-300 grow flex flex-col">
          <div class="align-center">HTTP/HTTPS</div>
          <div class="align-center">请求协议</div>
        </div>
        <div class="border-gray-300 border-2 text-gray-300 grow">
          <div>GET/POST</div>
          <div>请求方式</div>
        </div>
        <div class="border-gray-300 border-2 text-gray-300 grow">
          <div>UTF-8</div>
          <div>编码格式</div>
        </div>
        <div class="border-gray-300 border-2 text-gray-300 grow">
          <div>JSON</div>
          <div>返回格式</div>
        </div>
      </div>
    </Card>
    <Card>
      <template #title>接口参数</template>
      <pure-table
        ref="pureTableRef"
        border
        align-whole="center"
        showOverflowTooltip
        table-layout="auto"
        :loading="isLoading"
        :max-height="maxHeight"
        :data="[]"
        :columns="columns"
        :pagination="pagination"
        :header-cell-style="{
          background: 'var(--el-table-row-hover-bg-color)',
          color: 'var(--el-text-color-primary)',
        }"
        @page-size-change="changePageSize"
        @page-current-change="changePageNumber"
      />
    </Card>
  </div>
</template>
